<template>

  <el-container>
    <el-form v-model="blogContent">

    </el-form>
    <mavon-editor v-model="value"
                  ref=md
                  @save="save"
                  @change="onChange"
                  @imgAdd="uploadImg">
    </mavon-editor>

    <el-button
        @click="initData"
        class="el-button el-button--success">
      点击展示编辑后的内容
    </el-button>
    <br/>
    <br/>
    <div v-html="temp" v-highlightjs></div>
  </el-container>
</template>

<script>

import {mavonEditor} from "mavon-editor";

import "mavon-editor/dist/css/index.css";
// 引入代码高亮插件
import {marked} from 'marked'

import {dataFilePostRequest, postMd} from "@/utils/request";
import $ from 'jquery'

export default {
  name: "index",
  data() {
    return {
      article: {
        title: '',  // 标题
        label: '',  // 标签
        abstract: '', // 摘要
        content: '',  // 内容
        
      },
      value: '',
      blogContent: '',
      temp: '',
    };
  },
  methods: {
    initData(){
      this.blogContent = marked(this.value);
      this.temp = this.blogContent;
      $(function () {
        $(document).ready(function () {
          var that = $('pre').find('code');
          that.wrap('<div class="hljs" style="width: 800px; margin-left: 20px"></div>');
          var pre = $('pre')
          pre.wrap('<div class="hljs"></div>')
        });
      });
    },
    onChange() {

    },
    save() {
      //传递name(文件名),typeId(文件所属类别),value(md文件内容）
      var result = postMd("555", "java", this.value);
      console.log(result);
    },
    // 图片上传
    uploadImg(pos, file) {
      var formData = new FormData();
      formData.append('file', file);
      dataFilePostRequest("/file/upload", formData)
          .then((res) => {
            //使用服务器返回的图片地址替换原图片地址
            if (res.status) {
              var url = res.data[0];
              this.$refs.md.$img2Url(pos, url);
            }
          })
    },
  },

  components: {
    mavonEditor
  },
};
</script>

<style scoped>

</style>